﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery Splitter, Splitter Widget, Splitter, jqxSplitter" />
    <meta name="description" content="jQuery Splitter Widget - API. jqxSplitter is widget based on jQuery which provides an easy way to create dynamic 
    layout allowing you to resize, collapse panels. These panels are actualy are HTML container's children. 
    You can create both horizontal and vertical splitters based on your needs. This is allowing you to create complex layouts." />
    <title id='Description'>jqxSplitter is a widget based on jQuery which provides an easy
        way to create dynamic layouts with resizable and collapsible panels.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxexpander.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var rss = (function ($) {
                var createWidgets = function () {
                    var theme = "";

                    $('#mainSplitter').jqxSplitter({ theme: theme, width: 600, height: 600, panels: [{ size: 200, min: 100 }, {min: 200, size: 400}] });
                    $('#contentSplitter').jqxSplitter({ width: '100%', height: '100%', theme: theme, orientation: 'horizontal', panels: [{ size: 400, min: 100, collapsible: false }, { min: 100, collapsible: true}] });
                    $("#feedExpander").jqxExpander({toggleMode: 'none', showArrow: false, width: "100%", height: "100%", theme: theme,
                        initContent: function () {
                            $('#jqxTree').jqxTree({ height: '100%', width: '100%', theme: theme });
                        }
                    });
                    $("#feedContentExpander").jqxExpander({ toggleMode: 'none', showArrow: false, width: "100%", height: "100%", theme: theme, initContent: function () {
                         $('#feedItemContent').jqxPanel({ theme: theme, width: '100%', height: '100%' });
                    }
                    });
                    $("#feedListExpander").jqxExpander({
                        toggleMode: 'none', showArrow: false, width: "100%", height: "100%", theme: theme, initContent: function () {
                        $('#feedListContainer').jqxListBox({ theme: theme, source: ['1'], width: '100%', height: '100%' });
                    }
                    });
                };

                var addEventListeners = function () {
                    $('#jqxTree').on('select', function (event) {
                        var item = $('#jqxTree').jqxTree('getItem', event.args.element);
                        getFeed(config.feeds[item.label]);
                    });
                    $('#feedListContainer').on('select', function (event) {
                        loadContent(event.args.index);
                    });
                };

                var getFeed = function (feed) {
                    config.currentFeed = feed;
                    feed = config.dataDir + '/' + feed + '.' + config.format;
                    loadFeed(feed);
                };

                var loadFeed = function (feed, callback) {
                    $.ajax({
                        'dataType': 'json',
                        'url': feed,
                        success: function (data) {
                            var channel = data.rss.channel;
                            config.currentFeedContent = channel.item;
                            displayFeedList(config.currentFeedContent);
                            displayFeedHeader(channel.title);
                            selectFirst();
                        }
                    });
                };

                var selectFirst = function () {
                    $('#feedListContainer').jqxListBox('selectIndex', 0);
                    loadContent(0);
                };

                var displayFeedHeader = function (header) {
                    $("#feedListExpander").jqxExpander('setHeaderContent', header);
                };

                var displayFeedList = function (items) {
                    var headers = getHeaders(items);
                    config.feedListContainer.jqxListBox('source', headers);
                };

                var getHeaders = function (items) {
                    var headers = [], header;
                    for (var i = 0; i < items.length; i += 1) {
                        header = items[i].title;
                        headers.push(header);
                    }
                    return headers;
                };

                var loadContent = function (index) {
                    var item = config.currentFeedContent[index];
                    if (item != null) {
                        config.feedItemContent.jqxPanel('clearcontent');
                        config.feedItemContent.jqxPanel('prepend', '<div style="padding: 1px;"><span>' + item.description + '</span></div>');
                        addContentHeaderData(item);
                        config.selectedIndex = index;
                    }
                };

                var addContentHeaderData = function (item) {
                    var link = $('<a style="white-space: nowrap; margin-left: 15px;" target="_blank">Source</a>'),
                        date = $('<div style="white-space: nowrap; margin-left: 30px;">' + item.pubDate + '</div>');
                    container = $('<table height="100%"><tr><td></td><td></td></tr></table>');
                    link[0].href = item.link;
                    config.feedItemHeader.empty();
                    config.feedItemHeader.append(container);
                    container.find('td:first').append(link);
                    container.find('td:last').append(date);
                    $("#feedContentExpander").jqxExpander('setHeaderContent', container[0].outerHTML);
                };

                var dataDir = 'data';

                var config = {
                    feeds: { 'CNN.com': 'cnn', 'Geek.com': 'geek', 'ScienceDaily': 'sciencedaily' },
                    format: 'txt',
                    dataDir: dataDir,
                    feedTree: $('#jqxTree'),
                    feedListContainer: $('#feedListContainer'),
                    feedItemContent: $('#feedItemContent'),
                    feedItemHeader: $('#feedItemHeader'),
                    feedUpperPanel: $('#feedUpperPanel'),
                    feedHeader: $('#feedHeader'),
                    feedContentArea: $('#feedContentArea'),
                    selectedIndex: -1,
                    currentFeed: '',
                    currentFeedContent: {}
                };

                return {
                    init: function () {
                        createWidgets();
                        addEventListeners();
                        getFeed('sciencedaily');
                    }
                }

            } (jQuery));

            rss.init();
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="mainSplitter">
            <div>
                <div style="border: none;" id="feedExpander">
                    <div class="jqx-hideborder">
                        Feeds</div>
                    <div class="jqx-hideborder jqx-hidescrollbars">
                        <div class="jqx-hideborder" id='jqxTree'>
                            <ul>
                                <li item-expanded='true' id="t1">
                                    <img style='float: left; margin-right: 5px;' src='../../images/contactsIcon.png' /><span
                                        item-title="true">News and Blogs</span>
                                    <ul>
                                        <li>
                                            <img style='float: left; margin-right: 5px;' src='../../images/favorites.png' /><span
                                                item-title="true">Favorites</span>
                                            <ul>
                                                <li>
                                                    <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
                                                        item-title="true">ScienceDaily</span> </li>
                                            </ul>
                                        </li>
                                        <li>
                                            <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
                                                item-title="true">Geek.com</span> </li>
                                        <li>
                                            <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
                                                item-title="true">CNN.com</span> </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <div id="contentSplitter">
                    <div class="feed-item-list-container" id="feedUpperPanel">
                        <div class="jqx-hideborder" id="feedListExpander">
                            <div class="jqx-hideborder" id="feedHeader">
                            </div>
                            <div class="jqx-hideborder jqx-hidescrollbars">
                                <div class="jqx-hideborder" id="feedListContainer">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="feedContentArea">
                        <div class="jqx-hideborder" id="feedContentExpander">
                            <div class="jqx-hideborder" id="feedItemHeader">
                            </div>
                            <div class="jqx-hideborder jqx-hidescrollbars">
                                <div class="jqx-hideborder" id="feedItemContent">
                                    Select a news item to see it's content
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
